<template>
	<view>
		<u-navbar title="收获地址" :border-bottom='false' back-icon-size='48'></u-navbar>
		<view class="mian">
			<view class="main-item" v-if="addressList.length">
				<view class="main-item-li" v-for="(item,index) in addressList" :key='index'>
					<view class="info" @click='choseAddress(item.address_id)'>
						<view class="user">
							<text class="name">{{item.consignee}}</text>
							<text class="num">{{item.link}}</text>
							<view class="checked" v-if="item.is_default == 1">
								默认
							</view>
						</view>
						<view class="address">
							{{item.location_correct}}{{' '+item.district}}{{' '+item.address}}
						</view>
					</view>
					<view class="line">
					</view>
					<view class="edit" @click="navTo('./edit?address_id='+item.address_id)">
						修改
					</view>
				</view>
				<view class="addBtn" @click="navTo('./add')">
					<u-icon name="plus-circle" color="#2D7AFE" size="40"></u-icon>
					<text>添加收货地址</text>
				</view>
			</view>

			<view class="noCont" v-else>
				<image src="../../../../static/imgs/noaddress.png" mode=""></image>
				<view class="text">
					暂无收获地址,<text style="color: #2D7AFE;" @click="navTo('./add')">去添加</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import myRequest from '@/api/index.js'
	export default {
		data() {
			return {
				addressList: [],
				page: '1',
			}
		},
		onShow() {
			this.getAddress()
		},
		onReachBottom() {
			let num = Number(this.page) + 1
			this.page = num.toString()
			// this.getAddress()
		},
		onLoad() {},
		methods: {
			choseAddress(id) {
				// 保存选择的地址id
				this.$store.commit('changeAddressId',id)
				uni.navigateTo({
					url: '../order/order'
				})
			
			},
			async getAddress() {
				let res = await myRequest.getMyaddress({
					num: '5',
					page: this.page
				})
				if (res.status) {
					this.addressList = res.data
				}
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mian {
		padding: 32rpx 28rpx;

		.main-item {
			width: 100%;

			.addBtn {
				margin-top: 60rpx;
				width: 694rpx;
				height: 100rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				font-size: 32rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #2D7AFE;
				display: flex;
				align-items: center;
				justify-content: center;

				.icon {
					margin-right: 10rpx;
					width: 48rpx;
					height: 48rpx;
				}
			}

			.main-item-li {
				width: 694rpx;
				height: 200rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				padding: 0 36rpx;
				margin-bottom: 32rpx;

				.info {
					width: 80%;

					.user {
						display: flex;
						align-items: center;

						.name {
							font-size: 36rpx;
							font-family: PingFangSC-Regular;
							color: #120404;
						}

						.num {
							margin-left: 20rpx;
							font-size: 28rpx;
							font-family: PingFangSC-Light;
							color: #666666;
						}

						.checked {
							margin-left: 20rpx;
							width: 76rpx;
							height: 36rpx;
							background: #D7E5FC;
							border-radius: 4rpx;
							font-size: 24rpx;
							font-family: PingFangSC-Regular;
							color: #2D7AFE;
							text-align: center;
							line-height: 36rpx;
						}
					}

					.address {
						margin-top: 10rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Light;
						color: #666666;
					}
				}

				.line {
					margin-left: 40rpx;
					width: 2rpx;
					height: 40rpx;
					background: #F2F2F7;
				}

				.edit {
					margin-left: auto;
				}
			}
		}

		.noCont {
			max-width: 750rpx; //按一倍图适配
			overflow: hidden;
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0px;
			top: 50%;
			transform: translateY(-50%);
			background-color: #FFFFFF;
			border-radius: 16rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 368rpx;

			image {
				width: 478rpx;
				height: 392rpx;
			}

			.text {
				font-size: 32rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #333333;
			}
		}
	}
</style>
